WWL.gallery_lb = function ( name, attrs )
{			
	if ( ! attrs ) attrs = {};
	var galb = WWL.get_instance ( "gallery_lb", name );
	if ( ! galb ) galb = new WWL ( 'gallery_lb', name );
	
	
	//user define
	galb.lb_def_w = attrs.get ( 'base_width', 200 );
	galb.lb_def_h = attrs.get ( 'base_width', 200 );
	galb.lb_class = attrs.get ( 'css_class', 'galb' );
	galb.min_h = attrs.get ( 'min_h', null );
	galb.vspace = attrs.get ( 'vspace', 50 );	
	galb.start_pos = attrs.get ( 'start', 1 );
	galb.resize = attrs.get ( 'resize', true );
	galb.fullscreen = attrs.get ( 'fullscreen', 'contain' ); //values: contain ( fit image in browser window ), cover ( image fill browser window )
	galb.css_files = attrs.get ( 'css_files', [ 'gallery_lb' ] ); //css files that will be parsed by thumbviewer 

	galb.cbacks = {
			'click' : WWL.gallery_lb.show,
			'pre_render': null,
			'post_render': null,
			'tv_pre_render': null,
			'tv_post_render': null
			};

	//lightbox enviroment
	galb._name = name;
	galb.lb_win = 'gallery_lb:' + galb._name + ':lb_win';
	galb.lb_front = 'gallery_lb:' + galb._name + ':lb';
	galb.lb_back = 'liwe_lightbox';
	galb.lb_descr = galb._name + ':img_descr';
	galb._lb_back_opacity = 70;
	galb.lb_front_el = null;
	galb.lb_win_el = null;
	galb.lb_back_el = null;
	galb.thumbs_div = galb._name + ':thumbs';
	galb.thumbs_above = false;

	//internal values
	galb._transform = liwe.utils._dom_supports ( 'transform' );
	galb._fullsize = false;
	galb._last_item = null; //last item clicked 
	galb._last_pos = 0; //last position ( thumbs )
	galb._center_tmb = true; //center thumbs content

	//add gallery_lb css classes to lightbox elements
	galb._set_classes = function ()
	{
		var win = this.lb_win_el || $( this.lb_win );
		liwe.dom.add_class ( win , this.lb_class );
		liwe.dom.add_class ( $( this.lb_descr ), 'descr_div' );
	};

	//init WWL thumbviewer
	galb._init_thumbviewer = function ( name, start_pos )
	{
		this.tv = new WWL.thumbviewer ( name, attrs );
		var cfg = [], css = [], tv = this.tv;
		//set right order to css files
		cfg = tv.get_config ().get ( '_css_files', [] );
		cfg.iterate ( function ( v ) 
			{
				css.push ( v );
				if ( v == 'thumbviewer' ) //css.push ( 'gallery_lb' );
					galb.css_files.iterate ( function ( f ) { css.push ( f ) } );
			} );
		tv.set_config ( css );

		tv.set_cbacks ( 'click', this.cbacks [ 'click' ] );
		tv.set_cbacks ( 'pre_render', this.cbacks [ 'tv_pre_render' ] );
		tv.set_cbacks ( 'post_render', this.cbacks [ 'tv_post_render' ] );
		tv.set_cbacks ( 'post_render', this.cbacks [ 'tv_post_render' ] );
		if ( this._center_tmb ) tv.set_cbacks ( 'after_replace', this._center_thumb );
			
		tv.set_dest_div ( this.thumbs_div );
		tv.set_start_pos ( start_pos || this.start_pos );
		//this.test ();
	};

	galb._init_lightbox = function ()
	{
		liwe.lightbox.easy ( this.lb_front, this._name, this.lb_def_w, this.lb_def_h );
		liwe.lightbox.events [ 'close' ] = galb.close;

		//add event to switch form lightbox to full screen
		[ this.lb_win, this.lb_back ].iterate ( function ( div )
			{
				liwe.events.add ( $( div ), 'click', function ( e ) { 
					liwe.events.stop ( e ); 
					galb._set_fullsize ( div ); 
				} );
			} );

		//create and append image description div
		var descr_div = document.createElement ( 'div' );
		descr_div.setAttribute ( 'id', this.lb_descr );
		//liwe.dom.add_class ( descr_div, 'descr_div' );
		$( this.lb_win ).appendChild ( descr_div );

		this._set_classes ();	

		//add on over event
		function _descr ( show )
		{
			var lb_descr = $( galb.lb_descr );
			var fade_in = liwe.dom.show;
			var fade_out = liwe.dom.hide;
			/*
			if ( galb._transform )
			{
				fade_in = liwe.fx.fade_in;
				fade_out = liwe.fx.fade_out;
			};
			*/
			if ( show )
				fade_in ( lb_descr );
			else
				fade_out ( lb_descr );
		};
		liwe.events.add ( $( this.lb_win ), 'mouseover', function ( e ) { _descr ( 'show' ); } );
		liwe.events.add ( $( this.lb_win ), 'mouseout', function ( e ) { _descr (); } );
	};

	//add thumbviewer to dom
	galb._add_thumbs = function () 
	{	
		var lb_div = $( this.lb_front );
		//if lightbox element is not in dom, return
		if ( ! lb_div ) return;
		this.lb_front_el = lb_div;
		//create dom element
		var thumbs = document.createElement ( 'div' );
		thumbs.setAttribute ( 'id', this.thumbs_div );
		this._set_position ( thumbs );
		document.body.appendChild ( thumbs );
		this.tv.set_dest_div ( this.thumbs_div );
		this.tv.render ( this.thumbs_div );
		if ( ! this._center_tmb ) return;
		//center rendered thumbs
		var c, t = $c( 'div', 'os3tbv-thumb', this.thumbs_div );
		for ( c = 0; c < t.length; c ++ )
		{
			this._center_thumb ( t [ c ] );
		}
	};

	//center div content in thumb placeholder
	galb._center_thumb = function ( el, obj )
	{
		var img = el.firstChild;
		liwe.events.once ( img, 'load', function ()
			{
				el = $el ( el );
				var t = liwe.dom.get_size ( el );
				var c = liwe.dom.get_size ( img )
				var off_t = Math.round ( ( t [ 1 ] - c [ 1 ] ) / 2 ); 
				var off_l = Math.round ( ( t [ 0 ] - c [ 0 ] ) / 2 ); 
				img.style.marginTop = off_t + 'px';	
				img.style.marginLeft = off_l + 'px';	
			} );
	};

	//set thumbs container position based on lightbox size or fullscreen view
	galb._set_position = function ( thumbs ) 
	{
		function _lightbox ()
		{
			galb.loading ( 'remove' );
			var lb_div = galb.lb_win_el || $( galb.lb_win );
			if ( ! lb_div || ! thumbs ) return;
			h = parseInt ( liwe.dom.get_style ( lb_div, 'height' ) );
			t = parseInt ( liwe.dom.get_style ( lb_div, 'top' ) );
			z = liwe.dom.get_style ( lb_div, 'zIndex' );
			var curr_t, delta_t;
			//check average height
			h = ( galb [ 'min_h' ] && h < galb [ 'min_h' ] ) ? galb [ 'min_h' ] : h ;
		};

		function _fullsize ()
		{
			galb.loading ( 'remove' );
			var bk_div = galb.lb_back_el || $( galb.lb_back );
			if ( ! bk_div || ! thumbs ) return;
			t = parseInt ( liwe.dom.get_style ( bk_div , 'height' ) ) - galb.tv.cnt_height - padding;
			z = liwe.dom.get_style ( bk_div, 'zIndex' );
			h = 0, padding = 0;
		};
	
		if ( ! thumbs ) thumbs = galb.thumbs_div;
		thumbs = $el ( thumbs );
		var h, t, z; 
		var padding = galb [ 'vspace' ]; 
		var margin_left = galb.tv.cnt_width / 2 * -1;

		var func = ( galb._fullsize ) ? _fullsize : _lightbox; 
		func ();

		thumbs.style.position = 'absolute';
		thumbs.style.marginLeft = margin_left + 'px';
		thumbs.style.width = galb.tv.cnt_width + 'px';
		thumbs.style.zIndex = z;
		thumbs.style.left = '50%';

		curr_t = ( thumbs.style.top == "" ) ? 0 : parseInt ( thumbs.style.top );
		//if browser supports css transform and style top has been assigned already, then use liwe fx to position thumbs
		if ( galb._transform && curr_t != 0 )
		{
			delta_t = ( h + t + padding ) - curr_t;
			liwe.fx.translate ( thumbs, 0, delta_t, null, 200, 'ease-out' ); 
			return;
		}
		if ( ! galb.thumbs_above )
			thumbs.style.top = ( h + t + padding ) + 'px';
		else
			thumbs.style.top = ( h + t + padding ) + 'px';
	};

	
	galb._set_fullsize = function ( div, cback )
	{
		var lb_back = this.lb_back_el || $( this.lb_back );
		var lb_win = this.lb_win_el || $( this.lb_win );
		if ( ! lb_back || ! lb_win ) return;
		
		var o = ( liwe.dom.get_style ( lb_win, 'display' ) == 'block' ) ? true : false;

		//inhibit click event on back div when lightbox is visible
		if ( o && div == this.lb_back ) return;

		if ( o )
		{
			this._fullsize = true;
			liwe.dom.hide ( lb_win );
		} else {
			this._fullsize = false;
			liwe.dom.show ( lb_win );
		}
		this.show ( this._last_item );

		if ( cback ) cback ();
	};

	//add/remove loading class to lightbox back div
	galb.loading = function ( remove )
	{
		var back = this.lb_back_el || $( this.lb_back );
		if ( remove )
		{
			liwe.dom.del_class ( back , 'galb-loading' );
			return;
		}
		liwe.dom.add_class ( back , 'galb-loading' );
	};

	//close gallery and clear 
	galb.close = function ()
	{
		if ( $( galb.thumbs_div ) )
			liwe.dom.remove_element ( $( galb.thumbs_div ) );
		galb._last_pos = galb.tv.close ();
		//galb.clear ();
	};

	//reset gallery 
	galb.clear = function ( all )
	{
		galb.lb_front_el = null;
		galb.lb_win_el = null;
		galb.lb_back_el = null;
		galb.lb_def_w = 200;
		galb.lb_def_h = 200;
		galb._fullsize = false;
		galb.thumbs_div = galb._name + ':thumbs';

		galb.start_pos = attrs.get ( 'start', 0 );

		galb.cbacks = {
				'click' : WWL.gallery_lb.show,
				'pre-render': null,
				'post-render': null,
				'tv-pre-render': null,
				'tv-post-render': null
				};
		if ( ! all || ! galb.tv || ! galb.tv instanceof WWL ) return;
		galb.tv.clear ();
	};

	galb.add_item = function ( item )
	{
		if ( ! this.tv  || ! this.tv instanceof WWL ) return;
		var obj = TV.create_item_obj ( item );
		//add to item data gallery id for later use
		obj [ 'data' ][ 'gal_id' ] = this._name;
		this.tv.add_item ( obj );
	};	

	//render gallery
	galb.render = function ( start_pos )
	{
		if ( ! start_pos ) start_pos = this.start_pos;
		if ( ! this.tv ) this._init_thumbviewer ( this._name, start_pos );	
		//init lightbox 
		this._init_lightbox ();
		this._add_thumbs ();
		var thumbs = this.tv._class.thumbs || [];
		if ( thumbs.length > 0 && thumbs.length >= start_pos )
		{
			var data = thumbs [ start_pos ].get ( 'data' );
			this.show ( data );
		}
	};

	//return to gallery mode ( show lightbox )
	galb.clear_full_size = function ()
	{
		var lb_back = galb.lb_back_el || $( galb.lb_back );
		liwe.fx.set_opacity ( lb_back, this._lb_back_opacity );
		if ( galb._transform )
		{
			lb_back.style.backgroundSize = '';
			lb_back.style.backgroundImage = 'none';
		} else {
			var c, l = lb_back.childNodes.length;
			for ( c = 0; c < l; c ++ )  lb_back.removeChild ( lb_back.childNodes [ c ] );
		}
	};

	//start fullscreen mode ( hide lightbox )
	galb.full_size = function ( data )
	{
		var lb_back = this.lb_back_el || $( this.lb_back );
		if ( ! data.get ( 'fullsize' ) || ! lb_back ) return;

		liwe.fx.set_opacity ( lb_back, 100 );
		if ( galb._transform )
		{
			lb_back.style.backgroundPosition = 'center';
			if ( this.resize ) lb_back.style.backgroundSize = this.fullscreen;
			lb_back.style.backgroundRepeat = 'no-repeat';
			lb_back.style.backgroundImage = 'url(' + data.fullsize + ')'; 

		} else {	
			var img = document.createElement ( 'img' );
			img.onload = function ()
				{
					//get image size
					var div_size = liwe.dom.get_size ( lb_back );
					var img_size = liwe.dom.get_size ( img );
					//store image and canvas sizes by side
					var size = { 	'width' : [ div_size [ 0 ], img_size [ 0 ] ], 
							'height' : [ div_size [ 1 ], img_size [ 1 ] ] };
					//define primary side
					var side, rel;
					var delta = img_size [ 0 ] - img_size [ 1 ];
					if ( galb.fullscreen == 'cover' ) delta = - delta;
					if ( delta > 0 ) 
					{
						side = 'width'; rel = 'height';
					} else {
						side = 'height'; rel = 'width';
					}
					//relative dimension
					var res = ( galb.resize ) ? 0 : 1;
					var val = {}; 
					val [ rel ] = Math.round ( ( size [ side ][ res ] / size [ side ][ 1 ] ) * size [ rel ][ 1 ] );
					val [ side ] = size [ side ][ res ];
					//resize image
					img.setAttribute ( side, val [ side ] );
					img.setAttribute ( rel, val [ rel ] );
					//center image into canvas
					var prop, margin, res = ( res == 0 ) ? 1 : 0;
					size.iterate ( function ( v, k )
						{
							prop = ( k == 'width' ) ? 'marginLeft' : 'marginTop';
							margin = Math.round ( ( size [ k ][ 0 ] - val [ k ] ) / 2 );
							img.style [ prop ] = margin + 'px';
						} );
				};
			img.setAttribute ( 'src', data.fullsize );
			lb_back.appendChild ( img );	
		}
		this._set_position ();
	};

	galb.show = function ( data )
	{
		if ( ! data || typeof data != 'object' ) return;
		this._last_item = data;
		this.clear_full_size ();
		this.loading ();
		if ( ! this._fullsize )
		{
			liwe.lightbox.set_content ( this.lb_front, data.get ( 'content' , '' ), false, function ()
				{
					$( galb.lb_descr, data.get ( 'descr', '' ) );
					galb._set_position (); 
				});
			return;
		}
		
		this.full_size ( data );
	};	
	return galb;
};
//default onclick action for thumbviewer
WWL.gallery_lb.show = function ( data )
{
	var gal = WWL.get_instance ( 'gallery_lb', data.get ( 'gal_id' , '' ) );
	gal.show ( data );
};
/*
import media_manager results 
params:
	inst	gallery_lb instance name	
	mm_res	media_manager ajax_response
optionals:
	icon	icon size
	box	lightbox size
	full	fullscreen size

choose between media_manager available sizes ( icon, small, thumb, full, orig )	
*/
WWL.gallery_lb.import_mm = function ( inst, mm_res, icon, box, full )
{
	var gal = WWL.get_instance ( 'gallery_lb', inst );
	if ( ! gal ) return;
	//define mm sizes to use
	icon = icon || 'small';
	box = box || 'full';
	full = full || 'orig';	
	
	var todict = false;
	
	if ( liwe.types.to_dict )
		todict = true;
	
	if ( todict ) liwe.types.to_dict ( mm_res );

	var medias = mm_res.get ( 'media_items', [] );
	var sizes = mm_res.get ( 'sizes', [] );
	var html, items = [];
	
	if ( todict )
	{
		liwe.types.to_dict ( medias );
		liwe.types.to_dict ( sizes );
	}
	
	medias.iterate ( function ( media )	
		{
			if ( todict ) liwe.types.to_dict ( media );
			html = String.formatDict ( media.get ( 'html', '' ), 
					{ '_size' : icon, '_ext' : media.get ( 'ext', '.jpg' ) } );
			media [ 'content' ] = String.formatDict ( media.get ( 'html', '' ), 
					{ '_size' : box, '_ext' : media.get ( 'ext', '.jpg' ) } );
			media [ 'fullsize' ] = String.formatDict ( '/site/media_manager/image/%(_size)s/%(id_media)s%(_ext)s', 
					{ '_size' : full, '_ext' : media.get ( 'ext', '.jpg' ), 'id_media' : media.get ( 'id_media', '' ) } );
			gal.add_item ( { 'html' : html, 'data' : media } );
		} );
};
